<template>
  <div class="rightBottom">
    <div id="rightTop"></div>
  </div>
</template>

<script>
// import { inspection } from '@/api/device'

export default {
  data() {
    return {
      formInline: {
        radio1: "1",
        pickertime: []
      },
      initLeftX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      initLeftY: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70],
      initLeftZ: [100, 200, 110, 80, 70, 110, 90],
      bytes:''
    }
  },
  mounted() {
    this.$bus.$on('messages', curData => {
      // console.log(curData, 'curData===============>');
      if (curData.fileSizeList && curData.fileSizeList.length) {
        this.initLeftX = []
        this.initLeftY = []
        curData.fileSizeList.map(item => {
          // console.log(item)
          this.initLeftX.push(item.time+'时')
          // this.initLeftY.push(Math.ceil(item.fileSize / 1024))
          // return
          // this.initLeftY.push(this.fileSizeForMatter(item.fileSize / 1024))
           var size = "";
           let val = item.fileSize
          //  console.log(val)
           size = (val / (1024 * 1024)).toFixed(2)
          //  if(val ==0){
          //     // this.bytes = ""
          //     size = 0
          //  }
          //   else if (val < 0.1 * 1024&& val >0) {
          //     //小于0.1KB，则转化成B
          //     size = val.toFixed(2) 
          //     // this.bytes = "B"
          //   } else if (val < 0.1 * 1024 * 1024 && val >0.1 * 1024) {
          //     console.log(9999)
          //     //小于0.1MB，则转化成KB
          //     size = (val / 1024).toFixed(2) 
          //     // this.bytes = "KB"
          //   } else if (val < 0.1 * 1024 * 1024 * 1024 && val >0.1 * 1024 * 1024) {
          //     //小于0.1GB，则转化成MB
          //     size = (val / (1024 * 1024)).toFixed(2)
          //     // this.bytes = "MB"
          //   } else if (val < 0.1 * 1024 * 1024 * 1024 * 1024 && val >0.1 * 1024 * 1024 * 1024) {
          //     其他转化成GB
          //     size = (val / (1024 * 1024 * 1024)).toFixed(2)
          //       // this.bytes = "GB"
          //   } else if(val >= 0.1 * 1024 * 1024 * 1024 * 1024*1024) {
          //     size = (val / (1024 * 1024 * 1024 * 1024)).toFixed(2)
          //       // this.bytes = "TB"
          //   }
            this.initLeftY.push(size)
        })
      }
      if (curData.upgradeList && curData.upgradeList.length) {
        this.initLeftZ = []
        curData.upgradeList.map(item => {
          this.initLeftZ.push(item.countNum)
        })
      }
      this.initBottomRight()

    })
  },
  methods: {
    initBottomRight() {
      var rightTop = this.$echarts.init(document.getElementById("rightTop"));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#fccf7e', 'red'],
        legend: {
          data: ['升级完成', '使用流量']
        },
        grid: {
          top: "15%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.initLeftX
        },
        // yAxis:{
        //   type: 'value',
        // },
        yAxis:[
          {
            type: 'value',
            name: '使用流量 (MB)',
            min: 0,
            max:Math.max.apply(null, this.initLeftY),
            // interval: 3000,
            axisLabel: {
                formatter: `{value}`
            }
        },
        //    {
        //     type: 'value',
        //     name: '升级完成',
        //     min: 0,
        //     max:Math.max.apply(null, this.initLeftZ) ,
        //     // interval: 10,
        //     axisLabel: {
        //         formatter: '{value}'
        //     }
        // },
        
        ],
        series: [
          {
            name: '升级完成',
            type: 'line',
            data: this.initLeftZ,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          },
          {
            name: '使用流量',
            type: 'line',
            data: this.initLeftY,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      rightTop.setOption(option, true);
    },

  }
}
</script>

<style lang="scss" scoped>
.rightBottom {
  // margin-top: 1.5rem;
  // margin-left: 1.5rem;
  height: 100%;
  width: 100%;
  // background-color: red;
  .top {
    padding: 1rem;
    position: relative;
    .timeSelct {
      position: absolute;
      top: 1rem;
      right: -1rem;
    }
  }
  #rightTop {
    position: relative;
    padding-top: 1.5rem;
    height: 98%;
    // border: 0.1rem solid #ccc;
  }
}
.statistics {
  margin-bottom: 3rem;
  color: #000;
  font-size: 1.4rem;
  text-align: center;
}
.title {
  color: #33439f;
  font-size: 1.6rem;
  margin-top: 0.5rem;
  font-weight: 700;
}
</style>